import { defineComponent } from 'vue';
import EventEmitter from '/@/utils/bpmn/EventEmitter';
import type Modeler from 'bpmn-js/lib/Modeler';
import type CommandStack from 'diagram-js/lib/command/CommandStack';
import { createNewDiagram } from '/@/utils/bpmn';
// import LucideIcon from '@/components/common/LucideIcon.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';
import HlTooltip from './tooltip';

const Commands = defineComponent({
  name: 'Commands',
  setup() {
    const { t } = useI18n();
    let command: CommandStack | null = null;

    EventEmitter.on('modeler-init', (modeler: Modeler) => {
      command = modeler.get<CommandStack>('commandStack');
    });

    const undo = () => {
      command && command.canUndo() && command.undo();
    };

    const redo = () => {
      command && command.canRedo() && command.redo();
    };

    const restart = () => {
      command && command.clear();
      createNewDiagram();
    };

    return () => (
      <div className="commands hl-group">
        <div className="hl-group-item" onClick={() => undo()}>
          <HlTooltip content={t('routes.bpmn.undo')}>
            <Icon icon="lucide:undo-2" />
          </HlTooltip>
        </div>
        <div className="hl-group-item" onClick={() => redo()}>
          <HlTooltip content={t('routes.bpmn.redo')}>
            <Icon icon="lucide:redo-2" />
          </HlTooltip>
        </div>
        <div className="hl-group-item" onClick={() => restart()}>
          <HlTooltip content={t('routes.bpmn.restart')}>
            <Icon icon="lucide:eraser" />
          </HlTooltip>
        </div>
      </div>
    );
  },
});

export default Commands;
